<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { validateLogin, login } from '../store.js'

const router = useRouter()
const username = ref('')
const password = ref('')
const errorMessage = ref('')
const isLoading = ref(false)

const handleLogin = async () => {
  // 表单验证
  if (!username.value || !password.value) {
    errorMessage.value = '请输入用户名和密码'
    return
  }

  isLoading.value = true
  errorMessage.value = ''

  try {
    // 检查是否为管理员账号
    if (username.value === 'root' && password.value === 'root') {
      // 管理员登录，直接调用login函数
      const result = await login({
        username: username.value,
        password: password.value
      })
      
      if (result && result.isAdmin) {
        // 管理员登录成功，跳转到管理页面
        router.push('/admin')
        return
      }
    }
    
    // 普通用户登录验证
    const isValid = validateLogin(username.value, password.value)
    
    if (isValid) {
      // 登录成功，设置用户状态
      await login({
        username: username.value
      })

      // 登录成功后跳转到个人主页
      router.push('/profile')
    } else {
      errorMessage.value = '用户名或密码错误'
    }
  } catch (error) {
    errorMessage.value = '登录失败，请稍后重试'
    console.error('Login error:', error)
  } finally {
    isLoading.value = false
  }
}

const goToRegister = () => {
  router.push('/register')
}

const handleAuthRedirect = () => {
  router.push('/auth')
}

// 第三方登录
const handleWechatLogin = () => {
  console.log('微信登录')
  // 实际项目中应该调用微信登录API
}

const handleQQLogin = () => {
  console.log('QQ登录')
  // 实际项目中应该调用QQ登录API
}

const handleWeiboLogin = () => {
  console.log('微博登录')
  // 实际项目中应该调用微博登录API
}
</script>

<template>
  <div class="login-container">
    <div class="login-header">
      <div class="logo">
        <svg width="60" height="60" viewBox="0 0 40 40" fill="none">
          <rect width="40" height="40" rx="8" fill="#ff8c00"/>
          <text x="20" y="26" text-anchor="middle" fill="white" font-size="18" font-weight="bold">问答社区</text>
        </svg>
      </div>
      <h1>登录问答社区</h1>
      <p>分享知识，解决疑问</p>
    </div>
    
    <div class="login-box">
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <input
            v-model="username"
            type="text"
            placeholder="请输入用户名"
            required
            :disabled="isLoading"
            class="input"
          />
        </div>
        <div class="form-group">
          <input
            v-model="password"
            type="password"
            placeholder="请输入密码"
            required
            :disabled="isLoading"
            class="input"
          />
        </div>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
        <button
          type="submit"
          class="login-btn"
          :disabled="isLoading"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
      </form>
      
      <div class="other-login">
        <span class="line"></span>
        <span>其他方式登录</span>
        <span class="line"></span>
      </div>
      
      <div class="social-login">
        <button class="social-btn wechat" @click="handleWechatLogin" :disabled="isLoading">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
          </svg>
        </button>
        
        <button class="social-btn qq" @click="handleQQLogin" :disabled="isLoading">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
          </svg>
        </button>
        
        <button class="social-btn weibo" @click="handleWeiboLogin" :disabled="isLoading">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.42 13.41c-.27.26-.67.29-.97.07-.81-.66-1.9-1.06-3.45-1.06h-1v-6h1c2.5 0 4.65 1.44 5.37 3.51.15.41.04.87-.23 1.15l-.01.01z"/>
            <path d="M8 8h2v6H8z"/>
            <path d="M10 16h2v2h-2z"/>
          </svg>
        </button>
      </div>
    </div>
    
    <div class="register-link">
      还没有账号？
      <button type="button" @click="goToRegister" class="register-btn">
        立即注册
      </button>
    </div>
    
    <div class="login-agreement">
      登录即表示您同意小红书的
      <a href="#" class="link">用户协议</a>
      和
      <a href="#" class="link">隐私政策</a>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background-color: var(--vt-c-yellow-light);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header .logo {
  margin-bottom: 16px;
}

.login-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.login-header p {
  font-size: 16px;
  color: #999;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 20px;
}

.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.input:focus {
  outline: none;
  border-color: #ff8c00;
}

.error-message {
  color: #ff8c00;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #ff8c00;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover:not(:disabled) {
  background-color: #e07a00;
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.other-login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}

.line {
  flex: 1;
  height: 1px;
  background-color: #f0f0f0;
}

.other-login span:not(.line) {
  padding: 0 16px;
  color: #999;
  font-size: 14px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.social-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.social-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.social-btn.wechat {
  color: #07C160;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.social-btn.qq {
  color: #12B7F5;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.social-btn.weibo {
  color: #E6162D;
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

.register-link {
  margin-top: 32px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.register-btn {
  color: #ff8c00;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.login-agreement {
  margin-top: 20px;
  text-align: center;
  color: #ccc;
  font-size: 12px;
}

.login-agreement .link {
  color: #ff8c00;
  text-decoration: none;
}

@media (max-width: 480px) {
  .login-box {
    padding: 24px;
  }
  
  .social-login {
    gap: 24px;
  }
}
</style>